<template>
    <div class="header">
        <div class="left-box">
            <div class="title">所有项目</div>
            <div class="sub-title">查看和管理您的所有项目</div>
        </div>
        <div class="right-box">
            <div class="search-box">
                <Search1 value="" placeholder="搜索项目..."></Search1>
            </div>
            <div class="btn-box">
                <Button2 text="新建项目" icon="/icon/add.svg" @click=""></Button2>
            </div>
        </div>
    </div>
</template>

<script setup>
import Search1 from "@/components/input/Search1.vue";
import Button2 from "@/components/button/Button2.vue";
</script>

<style scoped lang="less">
.header {
    display: flex;
    align-items: center;

    .left-box {
        flex: 1;

        .title {
            font-size: 1.5vw;
            font-weight: 600;
        }

        .sub-title {
            font-size: 0.9vw;
            color: #888;
        }
    }

    .right-box {
        width: 30vw;
        display: flex;
        align-items: center;
        gap: 1vw;

        .search-box {
            flex: 1;
            height: 100%;
        }

        .btn-box {
            width: 8vw;
        }
    }
}
</style>